﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>预览报表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>

    <script src="/jslib/jsonpath.min.js"></script>
    <script src="/jslib/grhtml5-6.7-min.js"></script>
    <script src="/jslib/grwebapp.js"></script>
    <link rel="stylesheet" href="/sdk/sdk.css" />
    <script src="/sdk/sdk.js"></script>
    <style>
        html,
        body
        {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .hLeft {
            position: absolute;
            left: 0;
            /* top: 0; */
            /* width: 25%; */
            /*        height: 50px;*/
            /*        border: 1px solid #999;*/
        }

        .hRight {
            /*        height: 50px;*/
            /*        border: 1px solid #999;*/
            position: absolute;
            right: 0;
            /* top: 0; */
        }
    </style>
   
</head>

<body>
    <div class="layui-card" style="height:100%">

        <div class="layui-form layui-card-header" style="margin-left:5px;margin-right: 5px;">
            <div class="hLeft layui-input-inline">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="btnSearch">查询</button>
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-primary layui-btn-sm" href='javascript:webapp({});'>预览</a>
                    <a class="layui-btn layui-btn-primary layui-btn-sm" href='javascript:webapp({"type":"print"});'>打印</a>
                    <a class="layui-btn layui-btn-primary layui-btn-sm" href='javascript:webapp({"type":"pdf"});'>导出PDF</a>
                    <a class="layui-btn layui-btn-primary layui-btn-sm" href='javascript:webapp({"type":"xls"});'>导出Excel</a>
                </div>
            </div>
            <div class="hRight layui-input-inline">

            </div>
        </div>
        <div class="layui-card-body">
            <div id="report_holder"></div>
        </div>
    </div>

    <script type="text/html" id="dlg_search">
        <div class="layui-card" style="height: 100%;"><div id="root" class="app-wrapper" style="height: 100%;"></div></div>
    </script>
</body>

</html>
<script type="text/javascript">

    lobstercommon.name = "lobsterlayui";
    var appid = lobstercommon.GetUrlParam("appid");
    var id = lobstercommon.GetUrlParam("id");
    var access_token = lobstercommon.GetSSOToken();
    var reportViewer;
    let amis = amisRequire('amis/embed');

    //显示报表
    (function () {

        

        $('#btnSearch').click(function () {
            var html=$('#dlg_search').html();

            popupRight({
                id: 'LAY_adminPopup'
                , success: function () {
                    $('#LAY_adminPopup').html(html);   
                    loadamis();
                }
            });

        });

        webapp_urlprotocol_startup(); //启动WEB报表客户端程序，以便侦听接受 WebSocket 数据。这句特别重要*：只有在WEB报表客户端程序后，才能进行WebSocket通讯

        var _reportURL = "/report/v1/reportdata/GetReportFile?Id=" + id;
        var _dataURL = "/report/v1/reportdata/GetReportDataSource?Id=" + id + "&access_token=" + access_token;

        runReport(_reportURL, _dataURL);

        //document.title += reportViewer.run_args.reportid;

        //监听url的变化
        $(window).bind('hashchange', function () {
            var newdataURL = _dataURL + window.location.hash.replace("#", "&");
            runReport(_reportURL, newdataURL);
        });

    })();

    //rubylong.grhtml5.barcodeURL = "Barcode.ashx";

    //客户端预览报表
    function webapp(args) {
        args.baseurl = location.protocol + '//' + location.host;// window.rootURL;
        args.report = reportViewer.reportURL;//
        args.data = reportViewer.dataURL;//
        if (!reportViewer.dataURL) {
            args.selfsql = true;
        }

        webapp_ws_run(args);
    }

    //报表显示
    function runReport(_reportURL, _dataURL) {
        reportViewer = window.rubylong.grhtml5.insertReportViewer("report_holder", _reportURL, _dataURL);
        reportViewer.start(); //启动报表运行，生成报表
    }

    function loadamis() {
        // 通过替换下面这个配置来生成不同页面
        lobsterlayui.GET('/report/v1/reportdata/getamispage', { id: id }).then(data => {
            var pagejson = JSON.parse(data["schema"]);
            // 通过替换下面这个配置来生成不同页面
            let amisScoped = amis.embed('#root', pagejson);
        })
    }

    //右侧面板
    function popupRight(options) {
        //layer.close(admin.popup.index);
        return layer.open($.extend({
            type: 1
            , id: 'LAY_adminPopup'
            , anim: -1
            , title: false
            , closeBtn: false
            , offset: 'r'
            , shade: 0.1
            , shadeClose: true
            , skin: 'layui-anim layui-anim-rl layui-layer-adminRight'
            , area: ['500px','100%']
        }, options));
    }
</script>

